<extend name="Public/head" />
<block name="style">
    <style>
    .list {
        margin-top: 20px;
        margin-left: 16px;
    }
    
    .seat-row {
        display: block;
    }
    
    .seat-row li {
        height: 30px;
        float: left;
        background: #fff;
        width: 8%;
        font-size: 14px;
        text-align: center;
    }
    
    .seat-row a {
        width: 20px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        width: 100%;
        color: #2a2a2a;
        background-size: 20px 20px;
    }
    .aui-radio{
    	   border-radius :0;
    }
    .aui-radio-can{
    	background-color: #fff;
    }
    .aui-radio-has{
    	background-color: green !important;
    }
    .aui-radio-sell{
    	background-color:#e74c3c !important;
    }
    .myactive {
        background: #2ecc71 !important;
        color: #fff;
    }

    .mybtn{
    	color:#fff !important;
    }
    </style>
</block>
<block name="body">
    <ul class="aui-tab-nav aui-tab-border">
        <li class="">选择场次</li>
        <li class="active">在线选座</li>
        <li>支付</li>
        <li>取票</li>
    </ul>
    <div class="aui-content">
    	<ul class="aui-user-view">
    		 <li class="aui-user-view-cell aui-img">
                <div class="aui-img-body">
                    <span>{$movie.title}<em>&yen;{$info.price}元</em></span>
                    <p class='aui-ellipsis-1'>{$info.start_time|time_format}</p>
                </div>
            </li>
    	</ul>
    </div>
    <div class="aui-form">
    <div class="aui-input-row">
            <label class="aui-input-addon">说明</label>
            <div class="aui-pull-right">
                <input class="aui-radio aui-radio-can" type="radio" name="a">
                <div class="aui-radio-name">可选</div>
                <input class="aui-radio aui-radio-has" type="radio" name="b" >
                <div class="aui-radio-name">已选</div>
                <input class="aui-radio aui-radio-sell" type="radio" name="c" >
                <div class="aui-radio-name">已售</div>
            </div>
        </div>
    </div>
    <div class="aui-content">
    	<p>{$room.name}</p>
    </div>
    <div class="aui-content list">
    </div>
</block>
<block name="footbar">
	<div class="aui-content">
		 <p><button disabled onclick="pay()" class="aui-btn aui-btn-default aui-btn-block aui-btn-outlined  mybtn">提交订单(<span id="money">0.00</span>)</button></p>
	</div>
</block>
<block name="script">
    <script>
    window.rid = {$info.rid};
    window.manageid = {$manageid};
    $.getJSON('{:url("api/getseat",array("manageid"=>$manageid))}', function(data) {
        if (data.status == 1) {
            draw(data.data.row, data.data.col,data.hasSell);
        }
    })

    function draw(row, col, hasSell) {

        for (var i = 0; i < row; i++) {
            var html = '';
            html += '<ul class="seat-row aui-clearfix">';
            for (var j = 0; j < col; j++) {
                html += '<li class="l'+i+j+'" data-row="'+i+'" data-col="'+j+'"><a href="javascript:;"><span class="iconfont">&#xe606;</span></a></li>';
            }
            html += '</ul>';
            $('.list').append(html);
        }

        if(hasSell != '')
        {
            $.each(hasSell,function(i,v){
                $('.l'+v.row+v.col).addClass('aui-radio-sell');
            });
        }
    }

    $('.list').on('click', 'li', function() {
        var that = $(this);
        if(that.hasClass('aui-radio-sell'))
        {
            layer.msg("此座位已售出~");
            return ;
        }
        if (that.hasClass('myactive')) {
            that.removeClass('myactive');
            $('a', that).css('color', '#2a2a2a');
        } else {
            that.addClass('myactive');
            $('a', that).css('color', '#fff'); 
        }
        updateMoney();
    })

    function updateMoney(){
    	var money = parseFloat('{$info.price}');
    	var select = $('.myactive');
    	var total = select.length * money ;
    	if(total > 0)
    	{
    		$('.mybtn').removeClass('aui-btn-default');
    		$('.mybtn').addClass('aui-btn-danger');
    		if($('.mybtn').attr('disabled'))
    		{
    			$('.mybtn').removeAttr('disabled');
    		}
    	} else {
    		$('.mybtn').addClass('aui-btn-default');
    		$('.mybtn').removeClass('aui-btn-danger');
    		$('.mybtn').attr('disabled',true);
    		
    	}
    	$('#money').text(total.toFixed(2));
    }
    function pay(){
    	var select = $('.myactive');
    	var sit = {};
    	$.each(select ,function(i,v){
    		sit[i] = {};
    		sit[i].row = $(v).attr('data-row');
    		sit[i].col = $(v).attr('data-col');
    	});
    	var load = layer.load();
    	post(API + 'checkout' , {seat:sit,manageid:manageid} , function(data){
    		if(data.status == 2)
    		{
    			window.location.href = "{:url('index/login')}";
    		} else if(data.status == 1) {
    			window.location.href = data.url ;
    		} else {
    			layer.msg(data.info);
    		}
    	});
    }
    </script>
</block>
